<template>
	<el-container>
		<el-header>
			<el-card class="top">
				<div class="top-word">我的会员</div>
			</el-card>
		</el-header>
		<el-main>
			<el-card>
				<div class="vip">
					<!-- 头像 昵称 -->
					<div class="vipUser">
						<img class="userAvatar" src="../../../assets/images/2.jpg" alt="" />
						<div class="word">
							<p class="user-name">楠楠不难</p>
							<p class="user-vip">尊贵的会员</p>
						</div>
					</div>
					<div class="saving">开通会员平均每年可省：￥9500</div>
					<!-- 季度会员 -->
					<div class="price-area">
						<div class="price-block">
							<div class="price-box">
								<div
									class="price-box-main"
									:class="{ active: index == idx }"
									v-for="(val, index) in vipGrade"
									:key="index"
									@click="actHandle(index)"
								>
									<p class="price-title">{{ val?.data.title }}</p>
									<div price="middle">
										￥
										<span class="middle-box-num">{{ val?.data.price }}</span>
										<span class="middle-box-word">/季</span>
									</div>
									<p class="total">合计￥{{ val?.data.total_price }}</p>
								</div>
							</div>
						</div>
					</div>
					<!-- 按钮部分 -->
					<div class="btn-area">
						<button class="btn-area-btn">
							<span class="btn-area -word"><a href="https://www.dance365.com/pay?from=my_member&orderId=ff80808183efa2400183f905fec15fdd">立即以588元开通</a></span>
						</button>
					</div>
					<!-- 协议部分 -->
					<div class="argument">
						<span class="argument-left">开通即视为同意</span>
						<span class="argument-right">《会员服务协议》</span>
					</div>
				</div>
				<!-- 会员专属权益 -->
				<div class="member-benefits">
					<div class="member-benefits-title">会员专属权益</div>
					<ul class="member-benefits-list">
						<!-- 鼠标进入时间       移出事件 -->
						<li
							data-id="val1"
							class="list-item"
							@mouseenter="mouseenterS"
							@mouseleave="mouseleaveS"
						>
							<div class="posiDiv" v-if="val1">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/teach_video_free.png"
								/></span>
								<p>
									会员专区的724个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
								</p>
								<button class="btn-area-btn_span">
									<span class="_span -word">立即前往会员专区</span>
								</button>
							</div>
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/teach_video_free.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>

						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/member_preferential.png"
								/></span>
								<div class="list-item-word">
									<p>非会员专区课程</p>
									<p>可获会员立减优惠</p>
								</div>
							</div>
						</li>

						<li
							data-id="val3"
							class="list-item"
							@mouseenter="mouseenterS"
							@mouseleave="mouseleaveS"
						>
							<div class="posiDiv3" v-if="val3">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/teach_video_free.png"
								/></span>
								<p>
									也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！y
								</p>
								<button class="btn-area-btn_span">
									<span class="_span -word">立即前往会员专区</span>
								</button>
							</div>
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/teach_video_free.png"
								/></span>
								<div class="list-item-word">
									<p>会员专区</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>

						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/update_music@3x.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/music_clip@3x.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/member_photo_download1@3x.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img class="icon" src="https://rs.dance365.com/lv_ad@3x.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/lv_accelerate.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/course_equity.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/course_equity.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/member_logo.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
						<li class="list-item">
							<div class="list-item-box">
								<span
									><img
										class="icon"
										src="https://rs.dance365.com/update_equity.png"
								/></span>
								<div class="list-item-word">
									<p>
										<span style="color: rgb(249, 54, 132)">213</span>个会员专区
									</p>
									<p>课程免费学习</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</el-card>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { getVipgrade } from "../../../api/my/myvip/myvip"
let vipGrade = ref([])
let idx = ref(0)
let val1 = ref(false)
let val3 = ref(false)
onMounted(() => {
	vipList()
})
//VIP的数据
const vipList = async () => {
	let rs = await getVipgrade()
	vipGrade.value = rs
	console.log(rs)
}
const actHandle = (val) => {
	idx.value = val
}

const mouseenterS = (event) => {
	if (event.target.dataset.id == "val1") {
		val1.value = true
		return
	}
	if (event.target.dataset.id == "val3") {
		val3.value = true
		return
	}
}

const mouseleaveS = () => {
	val1.value = false
	val3.value = false
}
</script>

<style scoped>
.list-item {
	position: relative;
}
.posiDiv {
	position: absolute;
	top: -235px;
	left: -30px;
	width: 200px;
	background: #ffffff;
	border: 2px solid rgba(249, 83, 138, 0.5);
	min-height: 230px;
	border-radius: 15px;
	width: 200px;
	height: 220px;
}
.posiDiv3 {
	position: absolute;
	top: -235px;
	left: -30px;
	width: 200px;
	background: #ffffff;
	border: 2px solid rgba(249, 83, 138, 0.5);
	min-height: 230px;
	border-radius: 15px;
	width: 200px;
	height: 220px;
}

.btn-area-btn_span {
	width: 172px;
	height: 56px;
	font-size: 16px;
	text-align: center;
	border-radius: 10px;
	background: linear-gradient(-56deg, #ff4683, #ff638f);
	color: #fff;
	border: none;
}

._span {
	text-align: center;
}

.top-word {
	font-size: 14px;
}

.active {
	border: 2px solid #f93684 !important;
	background-color: #f9ebf1;
	color: #f93684;
}

.vip {
	border-bottom: 1px solid #e3e3e3;
}

.vipUser {
	margin-top: 20px;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.userAvatar {
	display: inline-block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #ccc;
	/* margin: 0 auto; */
}

.word {
	margin: 0 10px;
}

.user-name {
	font-size: 20px;
	color: #000;
}

.user-vip {
	margin-top: 14px;
	font-size: 14px;
	color: #f93684;
}

.saving {
	text-align: center;
	margin-top: 19px;
}

/* 季度会员 */
.price-block {
	width: 720px;
	margin: 21px auto 0;
}

.price-box {
	margin-top: 30px;
	display: flex;
}

.price-box-main {
	margin-right: 30px;
	width: 220px;
	height: 124px;
	border: 1px solid #b1b5c1;
	border-radius: 10px;
	text-align: center;
	display: flex;
	align-content: stretch;
	flex-direction: column;
	justify-content: space-evenly;
}

.price-title {
	line-height: 16px;
	font-size: 16px;
}

.middle-box-num {
	font-size: 26px;
}

.middle-box-word {
	font-size: 16px;
}

.total {
	font-size: 14px;
}

/* 按钮 */
.btn-area {
	width: 330px;
	display: block;
	margin: 0 auto;
	/* background-color: aqua; */
}

.btn-area-btn {
	width: 330px;
	height: 56px;
	font-size: 16px;
	margin: 30px auto 12px;
	border-radius: 10px;
	background: linear-gradient(-56deg, #ff4683, #ff638f);
	color: #fff;
	border: none;
}

/* 协议 */
.argument {
	text-align: center;
	font-size: 14px;
	margin: 10px 5px;
}

.argument-right {
	color: #f93684;
	margin: 0px 5px;
}

.member-benefits {
	border-bottom: 1px solid #e3e3e3;
	margin: 20px 0;
	padding-bottom: 25px;
}

/* 会员专属权益 */
.member-benefits-title {
	color: #111;
	font-weight: 700;
	font-size: 20px;
	margin-top: 32px;
}

.member-benefits-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 19px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	color: #111;
	font-weight: 400;
	margin: 20px 0 5px;
}

.list-item {
	margin-right: 10px;
	margin-bottom: 20px;
	width: 129px;
	height: 129px;
	border: 1px solid palevioletred;
	border-radius: 8px;
	text-align: center;
	padding: 14px 0 0;
	font-size: 14px;
}

.list-item-box {
	margin: 10px 0;
}

.icon {
	display: block;
	margin: 0 auto;
	width: 46px;
	height: 42px;
	background-size: cover;
}

.list-item-word {
	margin: 15px 0;
}
</style>
